<template>
  <div>
    <el-form
      ref="form"
      :model="params"
      label-width="100px"
      class="query"
    >
      <el-form-item label="book name" prop="bookName">
        <el-input
          v-model="params.bookName"
          style="width: 180px"
          maxlength="100"
          size="small"
          placeholder="enter book name please"
        />
      </el-form-item>

      <el-form-item label="Author" prop="author">
        <el-input
          v-model="params.author"
          style="width: 180px"
          maxlength="100"
          size="small"
          placeholder="enter book author please"
        />
      </el-form-item>

      <el-form-item label="Type" prop="type">
        <el-select
          v-model="params.type"
          multiple
          size="small"
          placeholder="please select"
        >
          <el-option
            v-for="item in typeOptions()"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

      </el-form-item>

      <el-form-item label="Category" prop="category">
        <el-select
          v-model="params.category"
          multiple
          size="small"
          placeholder="please select"
        >
          <el-option
            v-for="item in categoryOptions()"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="Keyword" prop="keyword">
        <el-input
          v-model="params.keyword"
          style="width: 180px"
          maxlength="100"
          size="small"
          placeholder="enter book keyword please"
        />
        <el-button
          type="primary"
          size="small"
          style="margin-left: 15px;"
          @click="query"
        >Query</el-button>
        <el-button
          type="primary"
          size="small"
          @click="add"
        >Add Book</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  inject: {
    typeOptions: {
      default: () => []
    },
    categoryOptions: {
      default: () => []
    }
  },
  data() {
    return {
      params: {
        userName: ''
      }
    }
  },

  methods: {
    query() {
      this.$emit('submit')
    },

    add() {
      this.$emit('add')
    }
  }
}
</script>

<style scoped>
  .query {
    display: flex;
    flex-wrap: wrap;
  }
</style>
